<template>
	<view class="alert-wrap">
		<u-sticky bgColor="#FFF" customStyle="border-bottom:1px solid #eee;">
			<u-tabs :list="tabList" :scrollable="false" lineWidth="80" lineHeight="2" :duration="100"
				@change="handleTabsClick">
			</u-tabs>
		</u-sticky>

		<view class="content">
			<view class="alert-item" v-for="(item, index) in datas" :key="index">
				<view class="left">
					<u-avatar v-if="item.status === 1" bg-color="#c4c6c9" icon="info-circle" fontSize="22"></u-avatar>
					<u-avatar v-if="item.status === 3" bg-color="#5ac752" icon="attach" fontSize="22"></u-avatar>
					<u-avatar v-if="item.status === 2" bg-color="#f9ae3d" icon="warning" fontSize="22"></u-avatar>
				</view>
				<view class="middle">
					<u--text lineHeight="22" :text="`告警：${item.alertName}`"></u--text>
					<u--text type="info" :text="`设备：${item.deviceName}`"></u--text>
					<u--text type="info" :text="`时间：${item.createTime}`"></u--text>
				</view>
				<view class="right">
					<u-button v-if="item.status !== 1" type="primary" icon="edit-pen-fill" shape="circle" size="mini"
						:text="`${item.status === 2 ? '处理' : '修改'}`" @click="handleDispose(item)"></u-button>
				</view>
			</view>
		</view>

		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" :show="total === 0"
			marginTop="30"></u-empty>
		<u-loadmore :status="loadmoreStatus" v-if="total > queryParams.pageSize" marginTop="20" />
		<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="FastBee.cn"></u-loading-page>
	</view>
</template>

<script>
	import { getAlertList } from '@/apis/modules/alertLog.js';

	export default {
		data () {
			return {
				// tabs列表
				tabList: [{
					id: 2,
					name: '待处理',
					badge: {
						value: 5,
					}
				}, {
					id: 1,
					name: '无需处理',
				}, {
					id: 3,
					name: '已处理',
				}],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					status: 2,
				},
				loading: true,
				datas: [], // log列表数据
				total: 0, // 总条数
				loadmoreStatus: 'loadmore',
			};
		},
		created () {
			this.getDatas();
		},
		methods: {
			// 获取列表数据
			getDatas () {
				this.loading = true;
				getAlertList(this.queryParams).then(res => {
					if (this.queryParams.pageNum == 1) {
						this.datas = res.rows;
					} else {
						this.datas = this.datas.concat(res.rows);
					}
					this.total = res.total;
					this.loading = false;
					if (this.queryParams.status === 2) {
						this.tabList[0].badge.value = res.total;
					}
					uni.stopPullDownRefresh();
				});
			},
			// 单击查询
			handleTabsClick (e) {
				this.queryParams.status = e.id;
				this.datas = [];
				this.queryParams.pageNum = 1;
				this.getDatas();
			},
			// 上拉加载
			onReachBottom () {
				this.loadmoreStatus = 'loading';
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize > this.total) {
					this.loadmoreStatus = 'nomore';
				} else {
					this.getDatas();
					this.loadmoreStatus = 'loadmore';
				}
			},
			// 下拉刷新
			onPullDownRefresh () {
				this.datas = [];
				this.queryParams.pageNum = 1;
				this.getDatas();
			},
			// 处理
			handleDispose (item) {
				uni.navigateTo({
					url: '/pagesA/alert/edit?alertLogId=' + item.alertLogId
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #eef3f7;
	}

	.alert-wrap {
		padding-bottom: 100px;

		.content {
			.alert-item {
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
				border-radius: 5px;
				margin: 10px;
				padding: 10px;
				background-color: #ffffff;

				.left {
					margin-right: 10px;
				}

				.middle {
					flex: 1;
				}

				.right {
					margin-left: 10px;
				}
			}
		}
	}
</style>